<!--
 * @Descripttion: 
 * @version: 
 * @Author: cyj
 * @Date: 2022-12-10 21:40:57
-->
<template>
    <div class="recmv" v-if="newMVList.length !== 0">
        <div class="title" @click="gotoNewMV">
            <span class="text">推荐MV</span>
            <el-icon size="20">
                <ArrowRight />
            </el-icon>
        </div>
        <div class="main">
            <div class="main-item" v-for="(item, index) in newMVList" :key="item.id">
                <mvlist :item="item"></mvlist>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import mvlist from '@/components/content/MVlist/mvlist.vue'

defineProps({
    newMVList: {
        tpye: Array,
        default: []
    }
})

const router = useRouter()

function gotoNewMV() {
    router.push('/recvideo/mv')
}


</script>

<style lang="scss" scoped>
// 260*150
.recmv {
    margin-top: 10px;

    .title {
        cursor: pointer;
        width: 180px;
        display: flex;
        align-items: center;

        .text {
            font-size: 20px;
            font-weight: 700;
            margin-right: 5px;
        }
    }

    .main {
        display: flex;

        .main-item {
            margin-right: 20px;
            margin-top: 10px;
            border-radius: 8%;
            height: 200px;
            width: 280px;
            cursor: pointer;
        }
    }
}
</style>